<template>
    <view class="top_bg"></view>
    <view class="container">
        <view class="title"> 绑定手机号 </view>
		<view v-if="!isSend">
			<view class="text_4" >请输入您所绑定的手机号</view>
			<view class="box_1">
				<text class="text_5">手机号</text>
				<input 
					type="tel"
					placeholder="请输入手机号" 
					class="text_6"
					:value="phone"
					@input="phone = $event.target.value"
				/>
			</view>
			<view class="text-wrapper_2">
				<text class="text_7" @click="getCode">获取验证码</text>
			</view>
		</view>

		<view  v-else>
			<view class="text_4">
				<text>短信验证码已发送至</text>&nbsp;
				<text class="text_5">{{ phone }}</text>
			</view>
			<view class="box_1">
				<input
					placeholder="请输入短信验证码" 
					class="text_6"
				/>
			</view>
			<view class="text-wrapper_2">
				<text class="text_7" @click="login">登录</text>
			</view>
		</view>
    </view>
</template>

<script setup>
import { ref } from 'vue'

	const isSend = ref(false)
	const phone = ref('')

	const getCode = () => {
		console.log('获取验证码',phone.value)
		isSend.value = true
	}
	const login = () => {
		console.log('登录')
        uni.redirectTo({
            url: '/pages/authorizedLogin'
        })
	}
</script>

<style scoped lang="scss">
@import "@/static/app.scss";
.top_bg {
    width: 750rpx;
    height: 416rpx;
    background: linear-gradient(
        180deg,
        #e1f7fe 0%,
        rgba(255, 255, 255, 0) 100%
    );
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.container {
    width: $width;
    margin: 0 auto;
    .title {
        overflow-wrap: break-word;
        color: rgba(13, 13, 13, 1);
        font-size: 48rpx;
        font-family: MiSans-Bold;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        line-height: 64rpx;
		margin: 282rpx 0 0 16rpx;
    }

    .box_1 {
        background-color: rgba(245, 245, 245, 1);
        border-radius: 48rpx;
        flex-direction: row;
        display: flex;
        padding: 26rpx 300rpx 26rpx 46rpx;
		margin-top: 190px;
    }
    .text_5 {
        font-size: 32rpx;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        line-height: 44rpx;
    }
    .text_6 {
        overflow-wrap: break-word;
        font-size: 32rpx;
        font-family: PingFangSC-Regular;
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 44rpx;
        margin-left: 24rpx;
    }

    .text-wrapper_2 {
        background-color: rgba(28, 7, 7, 1);
        border-radius: 42rpx;
        margin-top: 72rpx;
        display: flex;
        flex-direction: column;
        padding: 22rpx 274rpx 22rpx 276rpx;
    }
    .text_7 {
        font-family: PingFangSC-Semibold;
        font-weight: 600;
    }
}
</style>
